import { getMemberProfileAPI, putMemberProfileAPI } from '@/services/profile'
import { useMemberStore } from '@/stores'
import type { Gender, ProfileDetail } from '@/types/member'
import { formatDate } from '@/utils'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'

const useProfileHooks = () => {
  // 获取屏幕边界到安全区域距离
  const { safeAreaInsets } = uni.getSystemInfoSync()

  // 获取个人信息，修改个人信息需提供初始值
  const profile = ref({} as ProfileDetail)

  const getMemberProfileData = async () => {
    const res = await getMemberProfileAPI()
    profile.value = res.result
    // 同步 Store 的头像和昵称，用于我的页面展示
    memberStore.profile!.avatar = res.result.avatar
    memberStore.profile!.nickname = res.result.nickname
  }

  const memberStore = useMemberStore()
  // 修改头像
  const onAvatarChange = () => {
    // 调用拍照/选择图片
    // 选择图片条件编译
    // #ifdef H5 || APP-PLUS
    // 微信小程序从基础库 2.21.0 开始， wx.chooseImage 停止维护，请使用 uni.chooseMedia 代替
    uni.chooseImage({
      count: 1,
      success: (res) => {
        // 文件路径
        const tempFilePaths = res.tempFilePaths
        // 上传
        uploadFile(tempFilePaths[0])
      },
    })
    // #endif

    // #ifdef MP-WEIXIN
    // uni.chooseMedia 仅支持微信小程序端
    uni.chooseMedia({
      // 文件个数
      count: 1,
      // 文件类型
      mediaType: ['image'],
      success: (res) => {
        // 本地路径
        const { tempFilePath } = res.tempFiles[0]
        // 上传
        uploadFile(tempFilePath)
      },
    })
    // #endif
  }

  // 文件上传-兼容小程序端、H5端、App端
  const uploadFile = (file: string) => {
    // 文件上传
    uni.uploadFile({
      url: '/member/profile/avatar',
      name: 'file',
      filePath: file,
      success: (res) => {
        if (res.statusCode === 200) {
          const avatar = JSON.parse(res.data).result.avatar
          // 个人信息页数据更新
          profile.value!.avatar = avatar
          // Store头像更新
          memberStore.profile!.avatar = avatar
          uni.showToast({ icon: 'success', title: '更新成功' })
        } else {
          uni.showToast({ icon: 'error', title: '出现错误' })
        }
      },
    })
  }

  // 修改性别
  const onGenderChange: UniHelper.RadioGroupOnChange = (ev) => {
    profile.value.gender = ev.detail.value as Gender
  }

  // 修改生日
  const onBirthdayChange: UniHelper.DatePickerOnChange = (ev) => {
    profile.value.birthday = ev.detail.value
  }

  // 修改城市
  let fullLocationCode: [string, string, string] = ['', '', '']
  const onFullLocationChange: UniHelper.RegionPickerOnChange = (ev) => {
    // 修改前端界面
    profile.value.fullLocation = ev.detail.value.join(' ')
    // 提交后端更新
    fullLocationCode = ev.detail.code!
  }

  // 点击保存提交表单
  const onSubmit = async () => {
    const { nickname, gender, birthday } = profile.value
    const res = await putMemberProfileAPI({
      nickname,
      gender,
      birthday,
      provinceCode: fullLocationCode[0],
      cityCode: fullLocationCode[1],
      countyCode: fullLocationCode[2],
    })
    // 更新Store昵称
    memberStore.profile!.nickname = res.result.nickname
    uni.showToast({ icon: 'success', title: '保存成功' })
    setTimeout(() => {
      uni.navigateBack()
    }, 400)
  }

  onLoad(() => {
    getMemberProfileData()
  })

  return {
    profile,
    safeAreaInsets,
    onSubmit,
    formatDate,
    onGenderChange,
    onAvatarChange,
    onBirthdayChange,
    onFullLocationChange,
  }
}

export default useProfileHooks
